<template>
  <div class="show" :goodsdata="goodsdata"  >
     <van-skeleton title :row="3"  :loading="loading"/>
     
          <van-divider
              :style="{ color: 'black', borderColor: '#323233', padding: '0 2rem' }"
              v-show="!loading"
            >
              {{goodsdata.categoryName}}
            </van-divider>

            <div class="showgoods"  v-show="!loading">
                <div class="title-classify" >
                <span>详细分类</span>
                 <router-link  :to="{ name: 'goodsort', params: {cataId, sortId:goodsdata.threeLevelcategoryList[0].categoryId}}" v-if="goodsdata">更多</router-link>
                <!-- <router-link :index="index" :to="{path:`/goodsort/${index}` }">更多</router-link> -->
                <!-- <a href="#" @click="handelClick(index)" :index="index">更多 ></a> -->
                </div>
                <!-- <van-divider /> -->
                <div class="showgds">
                <!-- <template> -->
                    <router-link v-for="item in goodsdata.threeLevelcategoryList" :key="item.categoryId" @click="handleClick(item.categoryId)" :to="{ name: 'goodsort', params: {cataId , sortId:item.categoryId}}">
                        
                    <figure>
                    <img
                    v-lazy="item.categoryImg"
                    :src="item.categoryImg"
                    alt
                    />                
                    <figcaption>{{item.categoryName}}</figcaption>
                </figure>

                    </router-link>
                
                <!-- </template> -->
                </div>
            </div>

    </div>
  
</template>

<script>
import Vue from "vue";
import axios from 'axios'
import { get, post } from '../util/ajax'
import { Skeleton, Loading , Toast } from 'vant';
Vue.use(Skeleton);
Vue.use(Toast);
export default {
    
    props:['nowindex' ],
    data(){
        return {
            index:this.nowindex,
            classdata:'',
            itemData:'',
            goodsdata:'',
            loading:true,
            cataId : '',
            sortId:''
        }
    },
    async created(){
        // 设定初始值
        this.index = 0
        console.log(this.sortId)
        axios({
            url:'/classify/navList',
        })
        .then((data) => {
            
            this.classdata = data.data.data.catagoryList
            this.itemData = this.classdata[this.index]
            this.cataId = this.itemData.catagoryId
            axios.post('/biyao',
        {
            topicld : 10300148,
            pageId : 'moses:pid_1',
            sortType : 0,
            sortValue : 0,
            pageSize : 20,
            pageIndex : 1 ,
            categoryId : this.itemData.catagoryId
        })
        .then((detData) => {
            
            this.goodsdata = detData.data.data.subCategory
            this.loading = false;
            // console.log(this)
        })
        .catch((err) => {
            this.loading = true
        })
        })
        .catch((err) => {
            this.loading = true
            alert('请重新加载')
        })
        
        
        
        
        // console.log(this.classdata)
        // console.log(this.index)
        // console.log(this.itemData)
        
        // let detData = await post(
        //      '/biyao',
        //      {
        //           topicld : 10300148,
        //           pageId : 'moses:pid_1',
        //           sortType : 0,
        //           sortValue : 0,
        //           pageSize : 20,
        //           pageIndex : 1 ,
        //           categoryId : this.itemData.catagoryId
        //       }
        //   )
        //   console.log(detData)
        //   this.goodsdata = detData.data.data.subCategory
        //   console.log(this.goodsdata)
        
    
    },
    
    watch: {
//         cataId(val , old){
//             console.log(val , old)
//         },
//         $route(to,from){
//             this.$route.push({
//   path: '/detail',
//   query: {
//     name: '张三',
//     id: 1,
//   }
//             })
//         },
        // 等待传入值 然后请求 渲染页面
        nowindex: async function(value, oldval){
                            this.index = value
                            this.itemData = this.classdata[this.index]
                            this.cataId = this.itemData.catagoryId
                            this.loading=true
                        axios.post('/biyao',
                        {
                            topicld : 10300148,
                            pageId : 'moses:pid_1',
                            sortType : 0,
                            sortValue : 0,
                            pageSize : 20,
                            pageIndex : 1 ,
                            categoryId : this.itemData.catagoryId
                        })
                        .then((detData) => {
                            this.goodsdata = detData.data.data.subCategory
                            
                            this.loading = false;
                        })
                        .catch((err) => {
                            this.loading = true

                        })
                        console.log(this.goodsdata)
                        
                        },
 
    },
    methods : {
        handleClick(key){
            this.sortId = key
        }
    }
    
};
</script>

<style lang='stylus' scoped>
    .show 
        flex 1
        overflow scroll
    .showgoods
    .van-divider--hairline
        margin 0 
    .showgds
        display flex
        flex-wrap wrap
        padding-left .2rem
    figure
        margin: 0.32rem 0.3rem 0.64rem 0
        width 1.5rem
        text-align center
        img 
            display block
            width 1.34rem
            height 1.34rem
            margin-bottom 0.24rem
        figcaption 
            font-size .22rem
    .title-classify
        display flex
        justify-content space-between
        padding 0 0.32rem 0.2rem 0.28rem
        font-size .24rem
    a
        font-size .22rem
        color #999999
</style>